<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="70%"
    class="dialogBody"
    :before-close="handleClose"
  >
    <el-tabs v-model="activeName" type="card" @tab-click="handlePageClick">
      <el-tab-pane label="第一页" name="1"></el-tab-pane>
      <el-tab-pane label="第二页" name="2"></el-tab-pane>
      <el-tab-pane label="第三页" name="3"></el-tab-pane>
      <el-tab-pane label="第四页" name="4"></el-tab-pane>
      <el-tab-pane label="第五页" name="5"></el-tab-pane>
      <el-tab-pane label="第六页" name="6"></el-tab-pane>
      <el-tab-pane label="第七页" name="7"></el-tab-pane>
    </el-tabs>
    <el-form
      :model="addModel"
      :rules="addRules"
      ref="addRuleForm"
      label-position="left"
      label-width="110px"
      class="addForm"
    >
      <!-- 第一页 -->
      <div v-if="activeName == '1'">
        <el-row :gutter="15">
          <el-col
            v-for="item in firstItemList"
            :key="item.prop"
            :span="item.span"
          >
            <el-form-item :label="item.label" :prop="item.prop">
              <el-input
                v-if="item.type === 'Input'"
                v-model.trim="addModel[item.prop]"
                :placeholder="item.placeholder"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- 第二页 -->
      <div v-else-if="activeName == '2'">
        <el-row :gutter="15">
          <el-col :span="18">
            <el-row :gutter="15">
              <el-col
                v-for="item in secondItemList"
                :key="item.prop"
                :span="item.span"
              >
                <el-form-item :label="item.label" :prop="item.prop">
                  <!-- 文本框 -->
                  <el-input
                    v-if="item.type === 'Input'"
                    v-model.trim="addModel[item.prop]"
                    :placeholder="item.placeholder"
                  />
                  <!-- 下拉框 -->
                  <el-select
                    v-if="item.type === 'Select'"
                    v-model="addModel[item.prop]"
                  >
                    <el-option
                      v-for="op in item.options"
                      :key="op.value"
                      :label="op.label"
                      :value="op.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <!-- 上传图像 -->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="addModel.imageUrl"
                :src="addModel[item.prop]"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-row>
      </div>
      <!-- 第三页 -->
      <div v-else-if="activeName == '3'">
        <el-row :gutter="15">
          <el-col
            v-for="item in thirdItemList"
            :key="item.prop"
            :span="item.span"
          >
            <el-form-item :label="item.label" :prop="item.prop">
              <!-- 民族 -->
              <Nation v-if="item.type === 'Nation'" :model="addModel" />
              <!-- 血型 -->
              <Blood v-if="item.type === 'Blood'" :model="addModel" />
              <!-- 文化程度 -->
              <Culture v-if="item.type === 'Culture'" :model="addModel" />
              <!-- 职业 -->
              <Occupation v-if="item.type === 'Occupation'" :model="addModel" />
              <!-- 婚姻 -->
              <Marriage v-if="item.type === 'Marriage'" :model="addModel" />
              <!-- 医疗费用支付方式 -->
              <MedicalBill
                v-if="item.type === 'MedicalBill'"
                :model="addModel"
              />
              <!-- 药物过敏史 -->
              <Allergy v-if="item.type === 'Allergy'" :model="addModel" />
              <!-- 暴露史 -->
              <Expose v-if="item.type === 'Expose'" :model="addModel" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- 第四页 -->
      <div v-else-if="activeName == '4'">
        <h3 class="titleName">既往史</h3>
        <el-row :gutter="15">
          <el-col
            v-for="item in fourthItemList"
            :key="item.prop"
            :span="item.span"
          >
            <el-form-item :label="item.label" :prop="item.prop">
              <!-- 疾病 -->
              <Disease v-if="item.type === 'Disease'" :model="addModel" />
              <!-- 手术 -->
              <Operation v-if="item.type === 'Operation'" :model="addModel" />
              <!-- 外伤 -->
              <Trauma v-if="item.type === 'Trauma'" :model="addModel" />
              <!-- 输血 -->
              <BloodTransfusion
                v-if="item.type === 'BloodTransfusion'"
                :model="addModel"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- 第五页 -->
      <div v-else-if="activeName == '5'">
        <h3 class="titleName">家族史</h3>
        <el-row :gutter="15">
          <el-col
            v-for="item in fifthItemList"
            :key="item.prop"
            :span="item.span"
          >
            <el-form-item :label="item.label" :prop="item.prop">
              <!-- 父亲 -->
              <Father v-if="item.type === 'Father'" :model="addModel" />
              <!-- 母亲 -->
              <Mother v-if="item.type === 'Mother'" :model="addModel" />
              <!-- 兄弟姐妹 -->
              <Brothers v-if="item.type === 'Brothers'" :model="addModel" />
              <!-- 子女 -->
              <Children v-if="item.type === 'Children'" :model="addModel" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- 第六页 -->
      <div v-else-if="activeName == '6'">
        <el-row :gutter="15">
          <el-col
            v-for="item in sixItemList"
            :key="item.prop"
            :span="item.span"
          >
            <el-form-item :label="item.label" :prop="item.prop">
              <!-- 遗传病史 -->
              <Inheritance
                v-if="item.type === 'Inheritance'"
                :model="addModel"
              />
              <!-- 残疾情况 -->
              <Disability v-if="item.type === 'Disability'" :model="addModel" />
              <!-- 与户主关系 -->
              <Relationship
                v-if="item.type === 'Relationship'"
                :model="addModel"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- 第七页 -->
      <div v-else-if="activeName == '7'">
        <h3 class="titleName">生活环境</h3>
        <el-row :gutter="15">
          <el-col
            v-for="item in seventhItemList"
            :key="item.prop"
            :span="item.span"
          >
            <el-form-item :label="item.label" :prop="item.prop">
              <!-- 厨房 -->
              <Kitchen v-if="item.type === 'Kitchen'" :model="addModel" />
              <!-- 燃料类型 -->
              <Fuel v-if="item.type === 'Fuel'" :model="addModel" />
              <!-- 饮水 -->
              <Water v-if="item.type === 'Water'" :model="addModel" />
              <!-- 厕所 -->
              <Toilet v-if="item.type === 'Toilet'" :model="addModel" />
              <!-- 禽畜栏 -->
              <Poultry v-if="item.type === 'Poultry'" :model="addModel" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Nation from "@/components/CommonForm/form-item/Nation.vue"
import Blood from "@/components/CommonForm/form-item/Blood.vue"
import Culture from "@/components/CommonForm/form-item/Culture.vue"
import Occupation from "@/components/CommonForm/form-item/Culture.vue"
import Marriage from "@/components/CommonForm/form-item/Marriage.vue"
import MedicalBill from "@/components/CommonForm/form-item/MedicalBill.vue"
import Allergy from "@/components/CommonForm/form-item/Allergy.vue"
import Expose from "@/components/CommonForm/form-item/Expose.vue"

import Disease from "@/components/CommonForm/form-item/Disease.vue"
import Operation from "@/components/CommonForm/form-item/Operation.vue"
import Trauma from "@/components/CommonForm/form-item/Trauma.vue"
import BloodTransfusion from "@/components/CommonForm/form-item/BloodTransfusion.vue"

import Father from "@/components/CommonForm/form-item/Father.vue"
import Mother from "@/components/CommonForm/form-item/Mother.vue"
import Brothers from "@/components/CommonForm/form-item/Brothers.vue"
import Children from "@/components/CommonForm/form-item/Children.vue"

import Inheritance from "@/components/CommonForm/form-item/Inheritance.vue"
import Disability from "@/components/CommonForm/form-item/Disability.vue"
import Relationship from "@/components/CommonForm/form-item/Relationship.vue"

import Kitchen from "@/components/CommonForm/form-item/Kitchen.vue"
import Fuel from "@/components/CommonForm/form-item/Fuel.vue"
import Water from "@/components/CommonForm/form-item/Water.vue"
import Toilet from "@/components/CommonForm/form-item/Toilet.vue"
import Poultry from "@/components/CommonForm/form-item/Poultry.vue"
import { sexs, helpPoor, liveType } from "@/simdata/healthData.js"
export default {
  components: {
    Nation,
    Blood,
    Culture,
    Occupation,
    Marriage,
    MedicalBill,
    Allergy,
    Expose,
    Disease,
    Operation,
    Trauma,
    BloodTransfusion,
    Father,
    Mother,
    Brothers,
    Children,
    Inheritance,
    Disability,
    Relationship,
    Kitchen,
    Fuel,
    Water,
    Toilet,
    Poultry
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      title: ""
    }
  },
  data() {
    return {
      activeName: "1",
      currentPage: "1", // 控制当前第一页
      // 新增的字段
      addModel: {
        detailedAddress: "",
        nowAddress: "",
        HouseNumber: "",
        createDate: "",
        residence: "",
        residenceHouseNumber: "",
        organ: "",
        creatDoctor: "",
        responsibleDoctor: "",
        number: "",
        enterName: "",
        administerOrgan: "",
        enterDate: "",
        editDate: "",
        // 第二页字段
        imageUrl: "",
        nationList: ["1"], // 民族
        nationValue: "",
        bloodList: [], // 血型
        bloodOtherList: [], // 其他血型
        cultureList: [], // 文化程度
        occupationList: [], // 职业
        marriageList: [], // 婚姻
        medicalBillList: [], // 医疗费用支付方式
        medicalBillValue: "",
        allergyList: [], // 药物过敏史
        allergyValue: "",
        exposeList: [], // 暴露史
        // 第三段
        diseaseList: [], // 疾病
        hypertensionDate: "", // 高血压时间
        diabetesDate: "", // 糖尿病时间
        coronaryDate: "", // 冠心病时间
        manxinDate: "", // 慢性阻塞性肺疾病
        tumourDate: "", // 肿瘤时间
        strokeDate: "", // 脑卒时间
        mentalDate: "", // 严重精神时间
        tuberculosisDate: "", // 结核时间
        pneumoniaDate: "", // 肺炎时间
        legalDate: "", // 其他法定时间
        occupationDate: "", // 职业病时间
        otherDate: "", // 其他确诊时间
        diseaseValue: "", // 其他

        OperationList: [], // 手术
        operationName: "",
        operationDate: "",

        traumaList: [], // 外伤
        traumaName: "",
        traumaDate: "",

        BloodTransfusionList: [], // 输血
        BloodTransfusionName: "",
        BloodTransfusionDate: "",
        // 第五段
        fatherList: [],
        fatherValue: "",
        motherList: [],
        motherValue: "",
        brothersList: [],
        brothersValue: "",
        childrenList: [],
        childrenValue: "",

        inheritanceList: [],
        inheritanceValue: "",
        disabilityList: [],
        disabilityValue: "",
        relationshipList: [],
        relationshipValue: "",

        kitchenList: [],
        fuelList: [],
        waterList: [],
        toiletList: [],
        poultryList: []
      },
      addRules: {
        detailedAddress: [
          { required: true, message: "请输入家庭地址", trigger: "blur" }
        ],
        nowAddress: [
          { required: true, message: "请输入现住地址", trigger: "blur" }
        ],
        createDate: [
          { required: true, message: "请输入建档时间", trigger: "blur" }
        ],
        residence: [
          { required: true, message: "请输入户籍地址", trigger: "blur" }
        ],
        organ: [{ required: true, message: "请输入建档机构", trigger: "blur" }],
        creatDoctor: [
          { required: true, message: "请输入建档医生", trigger: "blur" }
        ]
      },
      // 配置label项
      firstItemList: [
        {
          type: "Input",
          label: "家\u2002庭\u2003住\u2002址",
          prop: "detailedAddress",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "现\u2002住\u2003地\u2002址",
          prop: "nowAddress",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "现住地址门牌号",
          prop: "HouseNumber",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "建\u2002档\u2003时\u2002间",
          prop: "createDate",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "户\u2002籍\u2003地\u2002址",
          prop: "residence",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "户籍地址门牌号",
          prop: "residenceHouseNumber",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "建\u2002档\u2003机\u2002构",
          prop: "organ",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "建\u2002档\u2003医\u2002生",
          prop: "creatDoctor",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "责\u2002任\u2003医\u2002生",
          prop: "responsibleDoctor",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "家\u2002庭\u2003编\u2002号",
          prop: "number",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "录\u2002入\u2003人\u2002员",
          prop: "enterName",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "管\u2002辖\u2003机\u2002构",
          prop: "administerOrgan",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "录\u2002入\u2003时\u2002间",
          prop: "enterDate",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "修\u2002改\u2003时\u2002间",
          prop: "editDate",
          disabled: false,
          placeholder: "",
          span: 8
        }
      ],
      secondItemList: [
        {
          type: "Input",
          label: "姓\u3000\u3000\u3000\u3000名",
          prop: "name",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "居民健康档案号",
          prop: "healthNum",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "医\u3000保\u3000号",
          prop: "medicalNum",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "编\u3000\u3000\u3000\u3000号",
          prop: "idNum",
          disabled: false,
          placeholder: "",
          span: 12
        },

        {
          type: "Select",
          label: "性\u3000\u3000\u3000\u3000别",
          prop: "sex",
          options: sexs,
          placeholder: "请选择...",
          span: 12
        },
        {
          type: "Input",
          label: "出\u2002生\u2002日\u2002期",
          prop: "birthdata",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Select",
          label: "精\u2002准\u2002扶\u2002贫",
          prop: "poor",
          options: helpPoor,
          placeholder: "请选择...",
          span: 12
        },
        {
          type: "Input",
          label: "身\u2002份\u2002证\u2002号",
          prop: "identityNumber",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "工\u2002作\u2002单\u2002位",
          prop: "workAddress",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "本\u2002人\u2002电\u2002话",
          prop: "phonenumber",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "联系人姓名",
          prop: "linkName",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "联系人电话",
          prop: "linkNumber",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Select",
          label: "常\u2002驻\u2002类\u2002型",
          prop: "live",
          options: liveType,
          placeholder: "请选择...",
          span: 12
        }
      ],
      thirdItemList: [
        {
          type: "Nation",
          label: "民\u3000\u3000\u3000\u3000族",
          span: 24
        },
        {
          type: "Blood",
          label: "血\u3000\u3000\u3000\u3000型",
          span: 24
        },
        {
          type: "Culture",
          label: "文\u2002化\u2002程\u2002度",
          span: 24
        },
        {
          type: "Occupation",
          label: "职\u3000\u3000\u3000\u3000业",
          span: 24
        },
        {
          type: "Marriage",
          label: "婚\u2002姻\u2002状\u2002态",
          span: 24
        },
        {
          type: "MedicalBill",
          label: "医疗费用支付方式",
          span: 24
        },
        {
          type: "Allergy",
          label: "药物过敏史",
          span: 24
        },
        {
          type: "Expose",
          label: "暴\u2002露\u2002史",
          span: 24
        }
      ],
      // 第四页配置项
      fourthItemList: [
        {
          type: "Disease",
          label: "疾\u3000\u3000\u3000\u3000病",
          span: 24
        },
        {
          type: "Operation",
          label: "手\u3000\u3000\u3000\u3000术",
          span: 24
        },
        {
          type: "Trauma",
          label: "外\u3000\u3000\u3000\u3000伤",
          span: 24
        },
        {
          type: "BloodTransfusion",
          label: "输\u3000\u3000\u3000\u3000血",
          span: 24
        }
      ],
      // 第五段
      fifthItemList: [
        {
          type: "Father",
          label: "父\u3000\u3000\u3000\u3000亲",
          span: 24
        },
        {
          type: "Mother",
          label: "母\u3000\u3000\u3000\u3000亲",
          span: 24
        },
        {
          type: "Brothers",
          label: "兄\u2002弟\u2002姐\u2002妹",
          span: 24
        },
        {
          type: "Children",
          label: "子\u3000\u3000\u3000\u3000女",
          span: 24
        }
      ],
      // 第六段
      sixItemList: [
        {
          type: "Inheritance",
          label: "遗\u2002传\u2002病\u2002史",
          span: 24
        },
        {
          type: "Disability",
          label: "残\u2002疾\u2002情\u2002况",
          span: 24
        },
        {
          type: "Relationship",
          label: "与户主关系",
          span: 24
        }
      ],
      // 第七段
      seventhItemList: [
        {
          type: "Kitchen",
          label: "厨房排风设施",
          span: 24
        },
        {
          type: "Fuel",
          label: "燃\u2002料\u2002\u2002类\u2002型",
          span: 24
        },
        {
          type: "Water",
          label: "饮\u3000\u3000\u3000\u3000水",
          span: 24
        },
        {
          type: "Toilet",
          label: "厕\u3000\u3000\u3000\u3000所",
          span: 24
        },
        {
          type: "Poultry",
          label: "禽\u3000畜\u3000栏",
          span: 24
        }
      ]
    }
  },
  methods: {
    // 关闭弹框
    handleClose() {
      this.$emit("update:dialogVisible", false)
      this.resetForm()
    },
    // 取消按钮
    cancel() {
      this.handleClose()
    },
    resetForm() {
      this.$refs["addRuleForm"].resetFields()
    },
    // 确定按钮
    submit() {
      console.log(this.addModel.allergyList)
      this.handleClose()
    },
    // 分页点击
    // handleCurrentChange(val) {
    //   this.currentPage = val
    // },
    // 切换第几页
    handlePageClick(tab) {
      // console.log(tab.name)
      this.activeName = tab.name
    },
    // 上传图像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg"
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!")
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style lang="scss" scoped>
.dialogBody {
  .el-row {
    display: flex;
    flex-wrap: wrap;
  }
}
.addForm {
  /deep/ .el-form-item {
    margin-bottom: 18px !important;
  }
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #5351f7;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  /deep/ .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 230px;
    height: 256px;
    line-height: 256px;
    text-align: center;
  }
  /deep/ .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.titleName {
  font-size: 22px;
  text-align: center;
}
.el-pagination {
  padding: 0px 0 10px 124px;
}
/deep/ .el-dialog {
  background: #7ed0f8;
}
/deep/ .is-active {
  background: #fff;
}
</style>
